<template>
  <Description title="闹钟" content="设置时间，到时间电脑会提示" />
  <div>
    <a-form :model="formState" name="validate_other" v-bind="formItemLayout" @finishFailed="onFinishFailed"
      @finish="onFinish">
      <a-form-item name="time" label="选择时间" :rules="[{ required: true, message: 'Please select your country!' }]">
        <a-date-picker v-model:value="formState.time" format="YYYY-MM-DD HH:mm:ss" valueFormat="x" placeholder="选择时间"
          :disabled-date="disabledDate" :disabled-time="disabledDateTime"
          :show-time="{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }" />
      </a-form-item>

      <a-form-item name="reminderMethod" label="提醒方式" :rules="[{ required: true, message: '必需选择至少一种提醒方式!' }]">
        <a-checkbox-group v-model:value="formState.reminderMethod">
          <a-row>
            <a-col :span="12">
              <a-checkbox value="systemNotice" style="line-height: 32px">系统通知</a-checkbox>
            </a-col>
            <a-col :span="12">
              <a-checkbox value="winTop" style="line-height: 32px">窗口显示在最前</a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>
      </a-form-item>
      <a-form-item label="提示标题" name="title">
        <a-input v-model:value="formState.title" />
      </a-form-item>
      <a-form-item label="提示内容" name="body">
        <a-textarea v-model:value="formState.body" />
      </a-form-item>

      <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
        <a-button type="primary" html-type="submit">提交</a-button>
      </a-form-item>
    </a-form>
    <a-button @click="asd">asd</a-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { reactive } from "vue";
import Description from '@/components/Description.vue'
import dayjs, { Dayjs } from "dayjs";
import { useTaskStore } from "@/stores/task";
const taskStore = useTaskStore();
const value = ref("");
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};
function asd() {
  window.ipcRenderer.invoke("shakeTimes", true);

}
const formState = reactive<Record<string, any>>({
  time: "",
  reminderMethod: [],
  title: "",
  body: "",
});
const onFinish = (values: any) => {
  console.log("Success:", values);
  const id = Date.now();
  let timer: any = setInterval(() => {
    if (values.time < dayjs().unix() * 1000) {
      if (values.reminderMethod.includes("systemNotice")) {
        window.ipcRenderer.invoke("systemNotice", {
          title: values.title,
          body: values.body,
        });
      }
      if (values.reminderMethod.includes("winTop")) {
        window.ipcRenderer.invoke("setAlwaysOnTop", true);
        setTimeout(() => {
          window.ipcRenderer.invoke("setAlwaysOnTop", false);
        }, 100);
      }
      clearInterval(timer);
      timer = null;
      taskStore.data = taskStore.data.filter((i: any) => i.id != id);
    }
  }, 1000);
  taskStore.data.push({
    id,
    type: "setInterval",
    url: "alarmClock",
    task: timer,
    description: ``

  });
};

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};
const range = (start: number, end: number) => {
  const result: number[] = [];

  for (let i = start; i < end; i++) {
    result.push(i);
  }

  return result;
};
const disabledDate = (current: Dayjs) => {
  // Can not select days before today and today
  return current && current.isBefore(dayjs(), "day");
};

const disabledDateTime = () => {
  const current = dayjs();
  const currentHour = current.hour();
  const currentMinute = current.minute();
  const currentSecond = current.second();

  return {
    disabledHours: () => {
      return range(0, currentHour);
    },
    disabledMinutes: (selectedHour: any) => {
      if (selectedHour === currentHour) {
        return range(0, currentMinute);
      }
      return [];
    },
    disabledSeconds: (selectedHour: any, selectedMinute: any) => {
      if (selectedHour === currentHour && selectedMinute === currentMinute) {
        return range(0, currentSecond);
      }
      return [];
    },
  };
};
</script>

<style></style>
